<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <!-- 引入favicon图标 -->
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
</head>
<style>
  /* 初始化代码 */
  * {
    margin: 0;
    padding: 0;
  }

  html,
  body {
    width: auto;
    height: 100%;
  }

  /* 初始化代码结束 */


  .container {
    width: 100%;
    height: 100%;
    background:url("2.gif") no-repeat;
    background-size: 100% 100%;
  }

  .w {

    margin: 14% auto;
    width: 800px;
  }

  /* 这是左边的框框内容！！！！！！! ！ */
  .container .login-left .login-logo img {
    display: block;
    width: 80%;
    height: 80%;
    margin: 40px auto;
  }

  .login-left {
    width: 400px;
    height: 400px;
    float: left;
    background-color: #ffffff55;
    border-radius: 4px;
    box-shadow: 0 0 2px #fff;
  }

  /* 这是右边的框框内容！！！！！！！！！ */

  .login-right {
    width: 400px;
    height: 400px;
    float: left;
    background-color: #fff;
    opacity: 0.9;
    border-radius: 4px;
    box-shadow: 0 0 2px #fff;
  }

  .login-right .biaoti {
    margin-top: 40px;
    text-align: center;
  }

  .form {
    margin-top: 10px;
    padding: 40px 40px 10px 10px;
  }

  .form i {
    font-size: 18px;
    color: #333;
  }

  .form a {
    display: block;
    float: right;
    text-decoration: none;
    color: #333;
  }

  .form .login-btn {
    width: 90%;
    margin-top: 10px;
    background-color: rgb(100,204,195);
  }

  .footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    color: rgb(0, 0, 0);
  }
  /*验证码*/
  .vcode-box{
    position: relative;
  }
  .vcode-box img{
    position: absolute;
    top: 1px;
    right: 5%;
    cursor: pointer;
  }
</style>
<!-- 引入jquery.js-->
<script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
<!-- 引入bootstrap.js-->
<script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
<script>
  $(function (){
    let login = new Login();
    login.setCpacha();
    login.login();
  })
  class Login{
    constructor() {
    }

    /**
     * 设置验证码
     */
    setCpacha(){
      $("#vcode-img").attr("src","/pm/getCpacha");
      $("#vcode-img").click(function (){
        this.src = this.src+"?"
      })
    }

    /**
     * 输入检查
     * @returns {boolean} true:校验通过，false:校验不通过
     */
    checkInput(){
      // 获取输入
      let username = $("#username").val();
      let password = $("#password").val();
      let vcode = $("#vcode").val();
      // 非空校验
      if(!username || username==''){
        bootoast({
          message: '账户不能为空！',
          type: 'danger',
          position:'top',
          timeout:2
        });
        return false;
      }
      if(!password || password==''){
        bootoast({
          message: '密码不能为空！',
          type: 'danger',
          position: 'top',
          timeout:2
        });
        return false;
      }
      if(!vcode || vcode==''){
        bootoast({
          message: '验证码不能为空！',
          type: 'danger',
          position: 'top',
          timeout:2
        });
        return false;
      }
      return true;
    }

    /**
     * 登录
     */
    login(){
      let that = this;
      $("#login-btn").click(function (){
        // 输入校验
        if(that.checkInput()){// 校验通过
          // 提交表单
          $.ajax({
            type: 'post',// 提交方式 post
            url: $("#myForm").attr("action"),
            cache: false,// 不启用缓存
            data: $("#myForm").serialize(),// 获取表单中的序列化数据，表单中的数据必须通过name=""绑定
            dataType: 'json',// 期望服务器响应的数据类型 json
            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
              if (result.code == 1) {// 登录成功
                alert(result.msg);
                bootoast({
                  message: result.msg,
                  type: 'success',
                  position:'top',
                  timeout:2
                });
                // 保存用户信息
                sessionStorage.setItem("userId", result.result.userId);
                sessionStorage.setItem("nickname", result.result.nickname);
                sessionStorage.setItem("role", result.result.role);
                // 保存登录用户的信息，在个人中心使用
                sessionStorage.setItem("user",JSON.stringify(result.result))
                // 跳转到主界面
                var role = result.result.role;
                window.location.href = "home.html";

              } else {
                bootoast({
                  message: result.msg,
                  type: 'danger',
                  position:'top',
                  timeout:2
                });
              }
            },
            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
              // 提示
              bootoast({
                message: '服务器请求错误！',
                type: 'danger',
                position: 'top',
                timeout:2
              });
            }
          })
        }
      })
    }
  }
</script>
<body>
<div class="container">
  <div class="w">
    <div class="login-left">
      <div class=login-logo>
        <p><img src="./static/img/logo.png" alt=""></p>
      </div>
    </div>
    <div class="login-right">
      <h1 class="biaoti">Login in</h1>
      <form class="form-horizontal form" id="myForm" action="/pm/users/login">
        <div class="form-group">
          <label class="col-md-2 control-label"><i class="glyphicon glyphicon-home"></i></label>
          <div class="col-md-10">
            <input type="text" class="form-control" id="username" name="username" placeholder="用户">
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label"><i class="glyphicon glyphicon-lock"></i></label>
          <div class="col-md-10">
            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
          </div>
        </div>
        <div class="form-group vcode-box">
          <label class="col-md-2 control-label"><i class="glyphicon glyphicon-ok-sign"></i></label>
          <div class="col-md-10">
            <input type="text" class="form-control" id="vcode" name="vcode" placeholder="验证码">
            <img alt="加载失败" id="vcode-img">
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-offset-2 col-md-10">
            <div class="checkbox">
              <label> <input type="checkbox"> 记住密码
              </label>
              <a href="">忘记密码</a>
            </div>

          </div>
        </div>
        <div class="form-group">
          <div class="col-md-offset-2 col-md-10">
            <button type="button" class="btn btn-default login-btn" id="login-btn">登录</button>
          </div>
        </div>
      </form>
    </div>
    <div class="footer">
      <p>技术支持：计科1902掘金少年</p>
    </div>
  </div>
</div>
</body>

</html>